<template>
     <el-menu
      :default-active="currentpath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :unique-opened="true"
      v-if="userinfo"
      >
      <template v-for="(menu,i) in menus" >
        <template v-if="userinfo.roleid>=menu.premession">
        <el-menu-item :key="i" v-if="!menu.children" :index="menu.path">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.text}}</span>
        </el-menu-item>
        <el-submenu v-else :key="i" :index="menu.path">
            <template slot="title" >
                <i :class="menu.icon"></i>
                <span>{{menu.text}}</span>
           </template>
           <template  v-for="(child,k) in menu.children">
            <el-menu-item  
                     v-if="!child.hide"
                    :key="k"
                    :index="child.path"

                    >
                    <i :class="menu.icon"></i>
                    <span slot="title">{{child.text}}</span>
            </el-menu-item>
           </template>
            
        </el-submenu>
      </template>
    </template>
  </el-menu>
</template>


<script>
import {menus} from "@/utils/menus"
//控制菜单的切换高亮
export default {
    props:['userinfo'],
    data(){
        return {
            menus,
            currentpath:this.$route.path,
            // roleid:sessionStorage.getItem("roleid")
        }
    },
    watch:{
        //监听路由改变高亮，点击哪里切换到哪里
     "$route":function(to,from){
         this.currentpath = to.path
     }
    },
    methods:{
        handleOpen(){

        },
        handleClose(){

        }
    }
}
</script>
<style lang="scss">
.el-menu-vertical-demo{
    background: rgba(0,0,0,0.3);
}
</style>